<template>
  <div class="layout-root">
    <el-container class="full">
      <!-- 顶部栏 -->
      <el-header class="app-header">
        <div class="logo">ERP 管理系统</div>
        <div class="header-actions">
          <el-button type="primary" link>帮助</el-button>
          <el-button type="primary" link @click="onLogout">退出</el-button>
        </div>
      </el-header>

      <!-- 主体：左侧菜单 + 右侧内容 -->
      <el-container class="body-container">
        <el-aside width="220px" class="side">
          <el-scrollbar>
            <el-menu
              active-text-color="#ffd04b"
              background-color="#545c64"
              class="el-menu-vertical-demo"
              :default-active="active"
              :unique-opened="true"
              text-color="#fff"
              use-router
              @open="handleOpen"
              @close="handleClose"
              @select="onSelect"
            >
              <el-sub-menu index="1">
                <template #title>
                  <el-icon><Location /></el-icon>
                  <span>物品管理</span>
                </template>
                <el-menu-item index="/BOMList">BOM管理</el-menu-item>
               <el-menu-item index="/WeatherWarning">天气预警</el-menu-item>

              </el-sub-menu>
            </el-menu>
          </el-scrollbar>
        </el-aside>

        <el-main class="content">
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { Document, Menu, Setting, Location } from '@element-plus/icons-vue'

const route = useRoute()
const router = useRouter()
const active = ref(route.path || '/BOMList')

watch(
  () => route.path,
  (p) => {
    active.value = p || '/BOMList'
  },
  { immediate: true }
)

function handleOpen(key: string, keyPath: string[]) {
  // 打开子菜单回调，可按需处理
  // console.log('open', key, keyPath)
}
function handleClose(key: string, keyPath: string[]) {
  // 关闭子菜单回调
  // console.log('close', key, keyPath)
}

function onSelect(index: string) {
  // index 即菜单项的 index，如 '/BOMList'
  if (index && index !== route.path) {
    router.push(index)
  }
}

function onLogout() {
  try {
    localStorage.removeItem('erp_token')
    localStorage.removeItem('erp_userName')
    localStorage.removeItem('erp_realName')
  } catch {}
  router.push({ name: 'Login' })
}
</script>

<style scoped>
.layout-root {
  height: 100vh;
  display: flex;
}
.full {
  width: 100%;
  height: 100%;
}
.app-header {
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  background-color: #ffffff;
  border-bottom: 1px solid #f0f0f0;
}
.logo {
  font-weight: 600;
}
.body-container {
  height: calc(100% - 56px);
}
.side {
  background: #545c64;
  color: #fff;
  border-right: none;
}
.content {
  padding: 16px;
  background: #f6f7fb;
  height: 100%;
  box-sizing: border-box;
}
/* 让菜单撑满侧栏 */
.el-menu-vertical-demo {
  border-right: none;
}
</style>
